<template>
<div>
  <div class="search">
<van-search
  show-action
  label="上海"
   background="#4fc08d"
  placeholder="请输入小区或者地址"

>
<van-icon name="chat-o" />
  <template #action>
      <div @click="onSearch"><van-icon name="location-o" color="#fff"/></div>
  </template>
</van-search>
  </div>
  <div class="screen ">
  <ul>
    <li> 区域 <span ><van-icon name="arrow-down" /></span>  </li>
    <li> 方式 <span ><van-icon name="arrow-down" /></span>  </li>
    <li> 租金 <span ><van-icon name="arrow-down" /></span>  </li>
    <li> 筛选 <span ><van-icon name="arrow-down" /></span>  </li>

  </ul>
</div>
      <div class="box" v-for="item in list " :key="item.id" >
    <div class="left">
      <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
    </div>
    <div class="right">
      <h5>{{item.title}}</h5>
      <p>{{item.desc}}</p>
      <span class="dt">{{item.tags[0]}}</span>
      <span class="yue">{{item.price}}</span>
    </div>
  </div>
</div>
</template>

<script>
import request from "@/utils/request.js"
export default {
  name: "HouSe",
  props: {},
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  created() {
    this.githouse();
  },
  mounted() {},
  watch: {},
  methods: {
    onSearch(){

    },
    async githouse() {
      const { data } = await request({
        url: "/houses",
        cityId: "AREA%7Cdbf46d32-7e76-1196 ",
        stat: 20,
        end: 29,
      });
      console.log(data.body.list);
      this.list = data.body.list;
    },
 
  },
  components: {},
};
</script>
<style>
.search{
  position:sticky;
  top:0
}
body {
  margin: 0;
  pad: 0;
}
</style>
<style scoped lang="less">
/* 把我们所有标签的内外边距清零 */
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}
/* 去掉li 的小圆点 */
li {
  list-style: none;
}

img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}

button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}
/* 将页面中所有的a的下划线清除 */
a {
  text-decoration: none;
}

button,
input {
  /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB",
    "\5B8B\4F53", sans-serif;
  /* 默认有灰色边框我们需要手动去掉 */
  border: 0;
  outline: none;
}

body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  color: #666;
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}

.clearfix {
  *zoom: 1;
}
.sin-line {
  /* 第一步：让文字强制一行显示 */
  white-space: nowrap;
  /* 第二步：溢出隐藏 */
  overflow: hidden;
  /* 第三步：溢出的内容省略号显示 */
  text-overflow: ellipsis;
}
.mu-row {
  /* 允许单词内换行 */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 开启盒子的弹性布局 */
  display: -webkit-box;
  /* 控制第几行出现省略号 */
  -webkit-line-clamp: 2;
  /* 设置子元素从上向下垂直排列 */
  -webkit-box-orient: vertical;
}

.box {
  display: flex;
  height: 100px;
  border: 1px solid #000;
  .left {
    width: 20%;
    border: 1px solid #ccc;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    h5 {
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      margin-bottom: 5px;
      color: #ccc;
    }
    .dt {
      color: aqua;
    }
    .yue {
      color: red;
    }
  }
}
.screen {
  height: 35px;
   position:sticky;
  top:55px;
  ul {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
width: 20%;
margin-left: 20px;
font-size: 14px;
color: #000;
  span {
    color: #666;
  }
    }
  }
}

</style>
